<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理</title>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" href="element-plus/index.css">
		<script src="element-plus/index.full.js"></script>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		.header{
			height: 50px;
			background: #333;
			color: #fff;
			font-size: 18px;
			padding: 0 15px;
			line-height: 50px;
			border-bottom: 1px solid #fff;
		}
		.content{
			width: calc(100% - 200px);
			height: calc(100vh - 50px);
			background-color: #f5f5f5;
			position: absolute;
			top: 50px;
			right: 0;
		}
	</style>
	<body>
		<div id='app'>
			<header class="header">
				<span>后台管理系统</span>
				<span style='float: right;'>admin</span>
			</header>
			<el-menu style='width: 200px;height: calc(100vh - 50px);'
				active-text-color="#ffd04b"
				background-color="#333"
				text-color="#fff"
				default-active='1'>
				<el-menu-item index=1>
					<span>用户管理</span>
				</el-menu-item>
				<el-menu-item index=2>
					<span>系统管理</span>
				</el-menu-item>
				<el-menu-item index=3>
					<span>日志管理</span>
				</el-menu-item>
			</el-menu>
			<!-- 内容区域 -->
			<div class="content">
				<el-card>
					<template #header>
						<div class="card-header">
							<span>用户管理</span>
							<el-button @click="show=true" style="float: right;" type='primary'>添加用户</el-button>
						</div>
					</template>
					
					<el-input placeholder='请输入搜索内容'>
						<template #append>
							<el-button>搜索</el-button>
						</template>
					</el-input>
					
					<el-table style="margin: 20px 0;" border :data='tableData'>
						<el-table-column width='50' label='ID' prop='id'></el-table-column>
						<el-table-column label='姓名' prop='name'></el-table-column>
						<el-table-column label='邮箱' prop='email'></el-table-column>
						<el-table-column label='电话' prop='phone'></el-table-column>
						<el-table-column label='角色' prop='role'></el-table-column>
						<el-table-column label='状态' prop='status'>
							<template #default='scope'>
								<el-tag v-if='scope.row.status == "启用"' type='success'>{{scope.row.status}}</el-tag>
								<el-tag v-else type='info'>{{scope.row.status}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column label='操作'>
							<template #default='scope'>
								<el-button type='primary' size='small'>编辑</el-button>
								<el-button @click="del(scope,$index)" type='danger' size='small'>删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页 -->
					<el-pagination
						:total='100'
						layout="total,sizes,prev,pager,next,jumper">
					</el-pagination>
				</el-card>
			</div>
			
			<!-- 弹窗 -->
			<el-dialog v-model="show" title="添加用户">
				<el-form label-width='100'>
					<el-form-item label='姓名'>
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item label='邮箱'>
						<el-input v-model="form.email"></el-input>
					</el-form-item>
					<el-form-item label='联系方式'>
						<el-input v-model="form.phone"></el-input>
					</el-form-item>
					<el-form-item label='角色'>
						<el-select v-model="form.role">
							<el-option value='管理员'>管理员</el-option>
							<el-option value='编辑'>编辑</el-option>
							<el-option value='查看者'>查看者</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label='状态'>
						<el-radio-group v-model="form.status">
							<el-radio value='启用'>启用</el-radio>
							<el-radio value='禁用'>禁用</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="show = false">取消</el-button>
						<el-button type="primary" @click="add"> 确定 </el-button>
					</div>
				</template>
			</el-dialog>
		</div>
		<script src="js/user.js"></script>
	</body>
</html>